<template>
    <div id="passport">
        <div class="row">
            <div class="col-md-12">
                <condition @getPassportCondition="getCondition"></condition>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="passports" size="small" border style="width: 100%">
                    <el-table-column fixed align="center" prop="UserId" label="编号" width="60"></el-table-column>
                    <el-table-column fixed align="center" prop="State" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.State == -1" type="info">已删除</el-tag>
                            <el-tag v-if="scope.row.State == 0">未激活</el-tag>
                            <el-tag v-if="scope.row.State == 1" type="success">已激活</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed align="center" prop="PassportNo" label="通行证号" width="130"></el-table-column>
                    <el-table-column fixed align="center" prop="Name" label="姓名" width="120"></el-table-column>
                    <el-table-column align="center" label="通行证类型" width="100">
                        <template slot-scope="scope">
                            <span>{{ scope.row.PassportType == 0 ? '观摩证' : '参赛证' }}</span>
                        </template> 
                    </el-table-column>
                    <el-table-column align="center" prop="UserName" label="用户名" width="120"></el-table-column>
                    <el-table-column align="center" label="性别" width="60">
                        <template slot-scope="scope">
                            <span>{{ scope.row.Sex == 'MALE' ? '男' : '女' }}</span>
                        </template>                        
                    </el-table-column>
                    <el-table-column align="center" prop="Age" label="年龄" width="60"></el-table-column>
                    <el-table-column align="center" label="出生年月" width="100">
                        <template slot-scope="scope">
                            <span>{{ scope.row.Birth | birth }}</span>
                        </template>                         
                    </el-table-column>
                    <el-table-column align="center" label="证件类型" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.IdType == 'IDCARD' ? '身份证' : '护照' }}</span>
                        </template>                          
                    </el-table-column>
                    <el-table-column align="center" prop="IdNumber" label="证件号码" width="150"></el-table-column>
                    <el-table-column align="center" label="国家地区" width="100">
                        <template slot-scope="scope">
                            <span>{{ formatLocation(scope.row.Country, scope.row.Province) }}</span>
                        </template>                        
                    </el-table-column>
                    <el-table-column align="center" prop="Phone" label="电话号码" width="120"></el-table-column>
                    <el-table-column align="center" prop="Email" label="电子邮件" width="180"></el-table-column>
                    <el-table-column align="center" prop="Orgnization" label="组织及学校" width="180"></el-table-column>
                    <el-table-column align="center" label="创建时间" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="100" v-if="authorize(['ROOT'])">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.State != -1" @click="remove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>                 
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    
    </div>
</template>

<script>

import Condition from './condition.vue';
import {BirthFormat, LocationStringFormat, ShowSuccess, TimeFormat} from 'web/utils';

export default {
    components: {
        Condition
    },
    filters: {
        birth: BirthFormat,
        time: TimeFormat
    },
    data() {
        return {
            passports: [],
            pageCount: 0,
            pageSize: 10,
            condition: { }          
        }
    },
    methods: {
        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$PassportService.QueryPassports(this.condition, val, this.pageSize)
                .then(ret => {
                    this.passports = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            Promise.all([
                this.$PassportService.QueryPassportsCount(condition),
                this.$PassportService.QueryPassports(condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.passports = ret[1];
            });
        },   
        
        // 删除通行证
        remove(passport) {
            this.$confirm(`确定要删除通行证 ${passport.Name}(${passport.PassportNo}) 吗？`, '删除通行证', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'}).then(() => {
                this.$PassportService.Remove(passport.UserId)
                    .then(ret => {
                        if(ret) {
                            passport.State = -1; 
                            ShowSuccess(`通行证 ${passport.Name}(${passport.PassportNo}) 已经删除。`,'删除通行证');                        
                        }
                    });
            });
        },

        formatLocation(country, province) {
            return LocationStringFormat(country, province);
        }
    }
}
</script>

<style>

</style>
